<template>
    <div class="vcrete-eventment">
        <h2>自定义事件及子传父</h2>
        <div class="hr"></div>
        <el-tag effect="dark">作用</el-tag>
        <p class="decr">
            用v-on自定义事件，子组件向父组件传递数据。
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">思路</el-tag>
        <p class="decr">
            1. 先在父组件中的子组件标签上创建一个自定义事件。自定事件如果是多个单词组成，就用xx-xxx的形式。<br>
            2. 通过自定义事件，向子组件传递方法名。注意，这里的方法名不需要用props接收。<br>
            3. 在子组件内通过$emit触发父组件的方法，此时可以携带参数给父组件，也就实现了子传父。<br>
            4. 当不需要触发时，可以使用$off解绑自定义事件。<br>
        </p>
        <div class="hr"></div>
        <el-tag effect="dark">Demo</el-tag>
        <p class="decr">
            <span>子组件在触发父组件的自定义事件时，可以携带参数，也可以不携带参数</span><br>
        </p>
        <p class="decr">
            <span>不传递参数给父组件：</span><br>
            <span>在子组件上创建自定义事件，show-msg是事件名，showMsg是事件处理函数。</span><br>
            <span>v-on:get-msg还可以简写为@get-msg。</span><br>
            {{em1}}<br>
            <VcreateEventmentSon v-on:show-msg="showMsg"></VcreateEventmentSon>
        </p>
        <p class="decr">
            <span>传递参数给父组件：</span><br>
            <span>在子组件上创建自定义事件，show-msg是事件名，showMsg是事件处理函数</span><br>
            {{em2}}<br>
            <VcreateEventmentSon2 @get-msg="getMsg"></VcreateEventmentSon2>
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            type="success"
            >
            <a :href="getHref" target="_blank">查看示例代码</a>
        </el-tag>
    </div>
</template>

<script>
import mixinPage from './mixin-page';
import VcreateEventmentSon from './VcreateEventmentSon';
import VcreateEventmentSon2 from './VcreateEventmentSon2';

export default {
    name: 'VcreateEventment',
    mixins: [mixinPage],
    components: {VcreateEventmentSon, VcreateEventmentSon2},
    data() {
        return {
            em1: `<VcreateEventmentSon v-on:show-msg="showMsg"></VcreateEventmentSon>`,
            em2: `<VcreateEventmentSon2 @get-msg="getMsg"></VcreateEventmentSon2>`,
        }
    },
    methods: {
        showMsg() {
            alert('触发了自定义事件~');
        },
        getMsg(msg) {
            alert('父组件从子组件接收到了信息： ' + msg);
        }
    }
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixin-frame.less';
</style>